import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function Index() {
  const nav = useNavigate();
  const [activeTab, setActiveTab] = useState('examination'); // examination: 检查, inspection: 检验
  const [examinationReports, setExaminationReports] = useState<Report[]>([]);
  const [inspectionReports, setInspectionReports] = useState<Report[]>([]);

  type Report = {
    id: string;
    title: string;
    status: 'issued' | 'not_issued';
    reportTime: string;

  }

  const handleBack = () => {
    nav(-1);
  };

  // const handleMoreOptions = () => {
  //   console.log('更多选项');
  // };

  // const handleTarget = () => {
  //   console.log('目标功能');
  // };

  const handleSwitchPatient = () => {
    console.log('切换患者');
  };

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };

  const handleReportClick = (reportId: string, reportTitle: string) => {
  console.log('查看报告详情:', reportId, reportTitle);
  
  // 确保参数存在
  if (!reportId || !reportTitle) {
    console.error('报告ID或标题缺失');
    return;
  }
  
  // 根据报告标题进行不同的跳转
  if (reportTitle === '双肾及肾血管彩色多普勒') {
    nav('/shen');
    
  } else if (reportTitle === '血常规') {
    nav('/xue');
  } else {
    // 其他报告可以跳转到通用报告详情页面或显示提示
    console.log('其他报告类型，暂未实现详情页面');
  }
};

  useEffect(() => {
    // 模拟检查报告数据
    const mockExaminationReports: Report[] = [
      {
        id: '1',
        title: '双肾及肾血管彩色多普勒',
        status: 'issued',
        reportTime: '2020-01-01 10:20:36',
        
        
      },
      {
        id: '2',
        title: '上腹部CT平扫',
        status: 'issued',
        reportTime: '2020-01-01 10:20:36'
      },
      {
        id: '3',
        title: '核磁共振',
        status: 'not_issued',
        reportTime: '--'
      }
    ];

    // 模拟检验报告数据
    const mockInspectionReports: Report[] = [
      {
        id: '4',
        title: '血常规',
        status: 'issued',
        reportTime: '2020-01-01 10:20:36'
      },
      {
        id: '5',
        title: '肝功三项',
        status: 'not_issued',
        reportTime: '--'
      }
    ];

    setExaminationReports(mockExaminationReports);
    setInspectionReports(mockInspectionReports);
   

  }, []);

  const currentReports = activeTab === 'examination' ? examinationReports : inspectionReports;

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div
            onClick={handleBack}
            style={{
              fontSize: '20px',
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' ,textAlign:'center'}}>
            门诊报告
          </div>
        </div>
        
      </div>

      {/* 患者信息区域 */}
      <div style={{
        margin: '16px',
        background: '#fff',
        borderRadius: '12px',
        padding: '16px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <div style={{ fontSize: '16px', fontWeight: 600, color: '#333' }} 
            onClick={()=>nav('/hou')}>
              王小柯
            </div>
            <div style={{ fontSize: '14px', color: '#999' }}>
              2015****10
            </div>
          </div>
          <div
            onClick={handleSwitchPatient}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '4px',
              cursor: 'pointer',
              padding: '4px 8px',
              borderRadius: '4px',
              background: '#f5f5f5'
            }}
          >
            <span style={{ fontSize: '14px' }}>👥</span>
            <span style={{ fontSize: '14px', color: '#333' }}>切换</span>
          </div>
        </div>
      </div>

      {/* 标签导航 */}
      <div style={{
        margin: '0 16px 16px',
        background: '#fff',
        borderRadius: '12px',
        overflow: 'hidden',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{ display: 'flex' }}>
          <div
            onClick={() => handleTabChange('examination')}
            style={{
              flex: 1,
              padding: '12px 16px',
              textAlign: 'center',
              cursor: 'pointer',
              background: activeTab === 'examination' ? '#1677ff' : '#fff',
              color: activeTab === 'examination' ? '#fff' : '#333',
              fontSize: '16px',
              fontWeight: 500,
              transition: 'all 0.3s ease'
            }}
          >
            检查
          </div>
          <div
            onClick={() => handleTabChange('inspection')}
            style={{
              flex: 1,
              padding: '12px 16px',
              textAlign: 'center',
              cursor: 'pointer',
              background: activeTab === 'inspection' ? '#1677ff' : '#fff',
              color: activeTab === 'inspection' ? '#fff' : '#333',
              fontSize: '16px',
              fontWeight: 500,
              transition: 'all 0.3s ease'
            }}
          >
            检验
          </div>
        </div>
      </div>

      {/* 报告列表 */}
      <div style={{ padding: '0 16px', paddingBottom: '20px' }}>
        {currentReports.map((report) => (
          <div
            key={report.id}
            onClick={() => handleReportClick(report.id, report.title)}
            style={{
              background: '#fff',
              borderRadius: '12px',
              padding: '16px',
              marginBottom: '12px',
              position: 'relative',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              cursor: 'pointer'
            }}
          >
            {/* 左侧蓝色条 */}
            <div style={{
              position: 'absolute',
              left: 0,
              top: 0,
              bottom: 0,
              width: '4px',
              background: '#1677ff',
              borderRadius: '0 4px 4px 0'
            }} />

            {/* 报告内容 */}
            <div style={{ paddingLeft: '12px' }}>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-start',
                marginBottom: '8px'
              }}>
                <div style={{
                  fontSize: '16px',
                  fontWeight: 600,
                  color: '#333',
                  flex: 1
                }}>
                  {report.title}
                </div>
                <div style={{
                  padding: '2px 8px',
                  borderRadius: '4px',
                  fontSize: '12px',
                  fontWeight: 500,
                  background: report.status === 'issued' ? '#e6f7ff' : '#fff2f0',
                  color: report.status === 'issued' ? '#1677ff' : '#ff4d4f'
                }}>
                  {report.status === 'issued' ? '报告已出' : '报告未出'}
                </div>
              </div>
              <div style={{
                fontSize: '14px',
                color: '#999'
              }}>
                报告时间: {report.reportTime}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Index;
